<template>
  <div class="main">
    <div>
      <div class="title">{{ state.title }}</div>
      <div class="content">{{ state.content }}</div>
      <div class="author">作者:{{ state.author }}</div>
      <div><Dianzan :articleId=state.id></Dianzan></div>
      <div class="created_at">创建时间:{{ state.created_at }}</div>
    </div>
    <div>
      <a-button @click="bankFn" type="primary" :size="size" class="bank"
        >返回</a-button
      >
      <a-button @click="preFn" type="primary" :size="size" class="pre"
        >上一篇</a-button
      >
      <a-button
        @click="nestFn"
        :disabled="isLastPage"
        type="primary"
        :size="size"
        class="next"
        >下一篇</a-button
      >
    </div>
    <div>
      <Pinglun :articleId="route.params.id" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { getArticleById, showPassageApi } from "../utils/api";
import { useRoute, useRouter } from "vue-router";
import Pinglun from "../components/pinglun.vue";
import Dianzan from "../components/dianzan.vue";

const state = ref({});
const route = useRoute();
const router = useRouter();

const result = async () => {
  const articleId = route.params.id;
  const res = await getArticleById({ id: articleId });
  state.value = res.data[0];
  console.log(state.value);

  // 获取当前浏览的时间
  const time = new Date().toLocaleString();

  // 将当前浏览详的时间添加到浏览详情数据中
  state.value.time = time;

  // 从localStorage获取已有的浏览记录
  let history = JSON.parse(localStorage.getItem("history")) || [];

  // 将当前浏览详情数据添加到浏览记录中
  history.push(state.value);

  // 将更新后的浏览记录保存回localStorage
  localStorage.setItem("history", JSON.stringify(history));
};

result();

// 返回到首页
const bankFn = () => {
  router.push("/shouye");
};

const preFn = async () => {
  const articleId = route.params.id;
  const res = await getArticleById({ id: articleId });
  console.log(res.data[0].id);
  if (res.data[0].id == 1) {
    alert("已经是第一篇了");
  } else {
    router.push(`/detail/${res.data[0].id - 1}`);
    state.value = res.data[0];
  }
};

const nestFn = async () => {
  const articleId = route.params.id;
  const res = await getArticleById({ id: articleId });
  console.log(res.code);
  if (res.data.length === 0) {
    //   阻止下一篇按钮的点击事件
    return;
    alert("已经是最后一篇了");
  } else {
    router.push(`/detail/${res.data[0].id + 1}`);
    state.value = res.data[0];
  }
};

const isLastPage = computed(() => {
  showPassageApi().then((res) => {
    // 计算一共有多少条数据
    const total = res.data.length;
    return state.value.id === total;
  });
});
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  background-color: antiquewhite;

  .title {
    width: 100%;
    height: 50px;
    font-size: 20px;
    font-weight: bold;
    margin: 0 auto;
    text-align: center;
    padding: 15px;
  }
  .content {
    width: 100%;
    height: 100%;
    font-size: 15px;
    font-family: "微软雅黑";
    margin: 0 auto;
    padding: 15px;
    // 文字缩进2
    text-indent: 2em;
  }
  .author {
    width: 100%;
    height: 50px;
    font-size: 15px;
    font-family: "微软雅黑";
    margin: 0 auto;
    padding: 15px;
    text-align: right;
  }
  .created_at {
    width: 100%;
    height: 50px;
    font-size: 15px;
    font-family: "微软雅黑";
    margin: 0 auto;
    padding: 15px;
    text-align: right;
  }
}
</style>
